<template>
  <div class="form-edit-container">
    <div class="left-board">
      <el-scrollbar class="left-scrollbar">
        <div class="components-list">
          <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
            <div class="components-title">
              {{ item.title }}
            </div>
            <draggable 
              v-model="arr1" 
              :group="grpupA" 
              animation="300" 
              dragClass="dragClass" 
              ghostClass="ghostClass"
              chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group :style="style">
                <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
              </transition-group>
            </draggable>
            <draggable
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              :list="item.list"
              :sort="false"
              class="components-draggable"
              draggable=".components-item"
              :force-fallback="true"
              :scroll="true"
              :scroll-sensitivity="160"
            >
              <div
                v-for="(element, index) in item.list"
                :key="index"
                class="components-item"
              >
                <div class="components-body">
                  {{ element.config.label }}
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <draggable
      :animation="180"
      :list="drawingList"
      class="drawing-board"
      group="componentsGroup"
      handle=".mover"
      :force-fallback="true"
      :scroll="true"
      :scroll-sensitivity="160"
    >
      <template #item="{ element }">
        <div class="item move">
          <label class="mover">{{ element.name }}</label>
          <span>内容....</span>
        </div>
      </template>
    </draggable>  
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { getAllComponents } from './config'

export default {
  name: 'FormEditor',
  components: {
    // TemplateCreate,
    // FormTinymce,
    // FormItemLayout,
    draggable,
    // RightPanel,
    // FormSvgIcon,
    // ImportFormItem
  },
  data() {
    return {
      showLoading: false,
      showPublishConfirm: false,
      formConf: null,
      tempFormConf: {},
      labelWidth: 100,
      drawingList: [],
      activeId: 0,
      activeData: null,
      formKey: null
    }
  },
  computed: {
    leftComponents() {
      this.showLoading = false
      return getAllComponents(this.tempFormConf.type)
    },
    // totalScore() {
    //   let total = 0
    //   this.drawingList.forEach((item) => {
    //     if (item.examConfig && item.examConfig.score) {
    //       total += item.examConfig.score
    //     }
    //   })
    //   // 如果有小数 保留一位小数
    //   if (Number.isInteger(total)) {
    //     return total
    //   } else {
    //     return Math.fround(total).toFixed(2)
    //   }
    // }
  },
  // watch: {
  //   'activeData.config.label': function (val, oldVal) {
  //     if (this.activeData.placeholder === undefined || !this.activeData.config.tag || oldActiveId !== this.activeId) {
  //       return
  //     }
  //     this.activeData.placeholder = this.activeData.placeholder.replace(removeHtmlTag(oldVal), '') + removeHtmlTag(val)
  //   },
  //   activeId: {
  //     handler(val) {
  //       oldActiveId = val
  //     },
  //     immediate: true
  //   }
  // },
  mounted() {
    // // 复制对象 避免修改改变原始对象
    // this.formConf = JSON.parse(JSON.stringify(getFormConfig(this.$route.query.type)))
    // // 项目key
    // this.formKey = this.$route.query.key
    // this.formConf.formKey = this.formKey
    // // 从服务端获取
    // this.queryProjectItems()
    // this.queryProject()
  },
  methods: {
    
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/home.scss';
@import '../../assets/styles/index.scss';

.template-text {
  margin-left: 20px !important;
}

.left-scrollbar .el-scrollbar__thumb {
  display: none;
}
</style>
